<template>
  <div class="profile-box">
    <el-card class="profile-card" shadow="hover">
      <!-- 个人资料头部，包含头像和用户信息 -->
      <div class="profile-header">
        <el-upload
            :show-file-list="false"
            class="avatar-uploader"
            :action="uploadUrl"
            :on-success="handleFileUpload"
            :before-upload="beforeUpload"
            :data="uploadData"
            name="multipartFile"
        >
          <img v-if="data.user.avatar" :src="data.user.avatar" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <el-space direction="vertical" style="margin-left: 20px;">
          <el-tag type="info">{{ data.user.name }}</el-tag>
          <el-tag>{{ data.user.username }}</el-tag>
        </el-space>
      </div>

      <!-- 分隔线 -->
      <el-divider></el-divider>

      <div class="profile-info">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="profile-item">
              <span class="label">账号:</span>
              <span class="value">{{ data.user.username }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="profile-item">
              <span class="label">名称:</span>
              <el-input v-model="data.user.name" placeholder="请输入名称" />
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <div class="profile-item">
              <span class="label">性别:</span>
                <el-radio-group v-model="data.user.sex" placeholder="请选择性别">
                  <el-radio label="male">男</el-radio>
                  <el-radio label="female">女</el-radio>
                  <el-radio label="other">其他</el-radio>
                </el-radio-group>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="profile-item">
              <span class="label">地区:</span>
              <el-select v-model="data.user.area" placeholder="请选择地区">
                <el-option label="北京" value="北京"></el-option>
                <el-option label="杭州" value="杭州"></el-option>
                <el-option label="太原" value="太原"></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <div class="profile-item">
              <span class="label">所属组织:</span>
              <el-input disabled v-model="data.user.cityName" />
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 分隔线 -->
      <el-divider></el-divider>

      <div style="text-align: center; margin-top: 20px;">
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request";
import { ElMessage } from "element-plus";
import { Plus } from '@element-plus/icons-vue';

const uploadUrl = import.meta.env.VITE_BASE_URL + '/files/upload';

const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
});



const emit = defineEmits(["updateUser"]);

const save = () => {
  request.put('/volunteer/update', data.user).then(res => {
    if (res.code === '200') {
      ElMessage.success('更新成功');
      localStorage.setItem('system-user', JSON.stringify(data.user));
      emit('updateUser');
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const loadVolunteer = () => {
  let user = JSON.parse(localStorage.getItem('system-user') || '{}');
  request.get('/volunteer/selectById/' + user.id).then(res => {
    if (res.code === '200') {
      data.user = res.data;
      localStorage.setItem('system-user', JSON.stringify(res.data));
    } else {
      ElMessage.error(res.msg);
    }
  });
};

// 文件上传成功后处理
const handleFileUpload = (response) => {
  if (response ) {
    data.user.avatar = response; // 假设返回的数据包括新头像的URL
    ElMessage.success("头像上传成功");
  } else {
    ElMessage.error("头像上传失败");
  }

};
// 可选：文件上传之前检查
const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  if (!isImage) {
    ElMessage.warning("上传文件必须是图片");
  }
  return isImage; // 返回 false 以阻止上传，返回 true 以继续上传
};

loadVolunteer();
</script>

<style scoped>

.profile-box {
  max-width: 2000px;
  margin: 40px auto; /* 减少上边距 */
  background-color: #f5f7fa;
  padding: 20px;
}

.profile-card {
  border-radius: 10px;
  padding: 20px;
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-uploader .avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.el-avatar {
  border: 2px solid #409eff;
}

.profile-info {
  padding: 20px 0;
}

.profile-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.profile-item .label {
  font-weight: bold;
  width: 80px;
  text-align: right;
  margin-right: 10px;
}

.profile-item .value {
  flex: 1;
}

.el-divider {
  margin: 20px 0;
}

.el-input, .el-select {
  width: 100%;
}
</style>
